<template>
	<view>
		<view style="width: 100%;height:1rpx;"></view>
		<view class="codeBox">
			<image :src="orderData.verify_code_url"></image>
			<view class="codeNum">{{orderData.verify_code}}</view>
		</view>
		
		<view class="goodsData">
			<view class="goodsTips">
				<text class="tipsTitle">下单时间</text>
				<text class="tipsContent">{{orderData.start_time}}</text>
			</view>
			
			<view class="goodsTips">
				<text class="tipsTitle">订单编号</text>
				<text class="tipsContent">{{orderData.order_id}}</text>
			</view>
			
			<view class="goodsTips">
				<text class="tipsTitle">店铺地址</text>
				<text class="tipsContent">{{orderData.businessinfo.address}}</text>
			</view>
			
			<view class="goodsTips" style="border:none;margin-bottom: 0;padding-bottom:15rpx;">
				<text class="tipsTitle">营业时间</text>
				<text class="tipsContent">{{orderData.businessinfo.start_hours}} 至 {{orderData.businessinfo.end_hours}}</text>
			</view>
		</view>
		
		<view class="goodsData">
			<view class="goodsBox">
				<image :src="orderData.pics[0].image" mode="widthFix"></image>
				<view class="goodsNameBox">
					<view class="goodsName">{{orderData.name}}</view>
					<view class="priceBox width_100">
						<text style="font-size:24rpx;transform:scale(0.75);color:#ff3333;font-weight: bold;">￥</text>
						<text style="font-size:34rpx;color:#ff3333;font-weight: bold;">{{orderData.sell_price}}</text>
						<text style="margin-left:10rpx;" class="originPrice">￥{{orderData.market_price}}</text>
						<view class="goodsNum">x {{orderData.num}}</view>
					</view>
				</view>
			</view>
			<view class="discountAmount">
				<text>共计：</text>
				<text style="color:#F15117;transform:scale(0.8);">￥</text>
				<text style="color:#F15117;font-size:36rpx;font-weight: bold;">{{orderData.amount}}</text>
			</view>
		</view>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading:true,
				opt:{},
				orderData:{},
			}
		},
		
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getDataFun();
		},
		
		methods: {
			getDataFun(){
				let _this = this;
				app.get('ApiBusinessProduct/getOrderInfo', {
					order_id:_this.opt.orderId,
					page:1,
					limit:10,
				}, function(res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					} else {
						_this.orderData = res.data.data[0];
					}
				});
			},
		}
	}
</script>

<style>
	page{
		background-color: #f3f3f3;
	}
	
	.codeBox{
		width:92%;
		background-color: #fff;
		margin:25rpx 4% 15rpx 4%;
		border-radius: 10rpx;
		display: flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
	
	.originPrice {
		text-decoration: line-through;
	}
	
	.codeBox image{
		width:400rpx;
		height:400rpx;
		margin:50rpx 0 40rpx 0;
	}
	
	.codeNum{
		width:400rpx;
		text-align: center;
		margin:0 50rpx;
		color:red;
		letter-spacing: 2px;
		font-weight: bold;
		font-size: 50rpx;
		padding:25rpx 0 25rpx 0;
		border-top:1px solid #ccc;
	}
	
	.goodsData{
		width:92%;
		float:left;
		margin:15rpx 4% 15rpx 4%;
		padding:20rpx 0;
		/* padding:20rpx; */
		border-radius: 15rpx;
		background-color: #fff;
	}
	
	.goodsTips{
		width:92%;
		float:left;
		margin:10rpx 4% 20rpx 4%;
		padding-bottom: 30rpx;
		border-bottom:1px solid #f7f7f7;
	}
	
	.tipsTitle{
		margin-right: 50rpx;
		color:#5a5a5a;
		font-weight: bold;
		font-size:28rpx;
	}
	
	.tipsContent{
		font-size:28rpx;
		color:#959595;
	}
	
	.goodsBox{
		width:94%;
		margin:0 3%;
		display: flex;
		align-items: center;
	}
	
	.goodsBox image{
		width:115rpx;
		height:115rpx;
		border-radius: 10rpx;
	}
	
	.goodsNameBox{
		width: calc(100% - 130rpx);
		float:left;
		margin-left:15rpx;
		color:#949494;
		font-size:24rpx;
		line-height: 55rpx;
		display: flex;
		flex-wrap:wrap;
	}
	
	.goodsName{
		width:100%;
		float:left;
		overflow: hidden;
		text-overflow: ellipsis; 
		white-space: nowrap;
		font-weight: bold;
		font-size:28rpx;
		color:#000;
	}
	
	.width_100{
		width:100%;
		float:left;
	}
	
	.priceBox{
		display: flex;
	}
	
	.discountAmount{
		width:94%;
		margin:20rpx 3% 0 3%;
		display: flex;
		align-items:center;
		justify-content:flex-end;
		font-size:28rpx;
		line-height: 60rpx;
	}
	
	.goodsNum{
		margin-left:auto;
		color:#F15117;
		font-weight: bold;
	}
</style>
